<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<script src="../jss/global.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<script>
			var addIndex;
			layui.use(['layer', 'form', 'table'], function() {
				var layer = layui.layer;
				var table = layui.table;
				var form = layui.form;
				var $ = layui.$;

				//渲染表格
				table.render({
					elem: '#demo', //指定哪个容器
					url: globalData.server + "student/select",
					where: {
						token: globalData.getToken
					},
					page: true, //是否开启分页
					method: 'post', //提交方式
					cols: [
						[{
							field: 'stuId',
							title: '学生编号',
							width: 100
						}, {
							field: 'stuName',
							title: '学生姓名',
							width: 100
						}, {
							field: 'stuSex',
							title: '卡号',
							width: 100
						}, {
							field: 'stuAge',
							title: '姓名',
							width: 100
						}, {
							field: 'stuPhone',
							title: '性别',
							width: 80
						}, {
							field: 'stuQq',
							title: '状态',
							width: 80
						}, {
							field: 'stuWechat',
							title: '系名',
							width: 300
						}, {
							field: 'stuCreatTime',
							title: '专业',
							width: 180
						}, {
							field: 'stuEducation',
							title: '学历',
							width: 80
						}, {
							field: 'stuStatus',
							title: '学历',
							width: 80
						}, {
							field: 'stuSourceChannel',
							title: '学历',
							width: 80
						}, {
							field: 'stuSourceWeb',
							title: '学历',
							width: 80
						}, {
							field: 'stuSourceKeyword',
							title: '学历',
							width: 80
						}, {
							field: 'stuSheng',
							title: '学历',
							width: 80
						}, {
							field: 'stuShi',
							title: '学历',
							width: 80
						}, {
							field: 'stuXian',
							title: '学历',
							width: 80
						}, {
							field: 'stuAttention',
							title: '学历',
							width: 80
						}, {
							field: 'stuInterest',
							title: '学历',
							width: 80
						}, {
							field: 'userId',
							title: '学历',
							width: 80
						}, {
							field: 'userName',
							title: '学历',
							width: 80
						}, {
							field: 'stuAdvisory',
							title: '学历',
							width: 80
						}, {
							field: 'userId2',
							title: '学历',
							width: 80
						}, {
							field: 'userName2',
							title: '学历',
							width: 80
						}, {
							field: 'courseDirection',
							title: '学历',
							width: 80
						}, {
							field: 'isValid',
							title: '学历',
							width: 80
						}, {
							field: 'noValidCause',
							title: '学历',
							width: 80
						}, {
							field: 'isBook',
							title: '学历',
							width: 80
						}, {
							field: 'stuDeposit',
							title: '学历',
							width: 80
						}, {
							field: 'stuDepositTime',
							title: '学历',
							width: 80
						}, {
							field: 'isPay',
							title: '学历',
							width: 80
						}, {
							field: 'stuPayTime',
							title: '学历',
							width: 80
						}, {
							field: 'stuPayMoney',
							title: '学历',
							width: 80
						}, {
							field: 'isRefund',
							title: '学历',
							width: 80
						}, {
							field: 'refundCause',
							title: '学历',
							width: 80
						}, {
							field: 'isClass',
							title: '学历',
							width: 80
						}, {
							field: 'stuClassTime',
							title: '学历',
							width: 80
						}, {
							field: 'stuClassRemark',
							title: '学历',
							width: 80
						}, {
							title: '操作',
							width: 300,
							toolbar: '#barDemo'
						}]
					],
					id: 'testTable'
				});

				//点击搜索按钮，调用方法
				$('#search').click(function() {
					table.reload('testTable', {
						where: {
							//查询的条件
							'department': $('#department').val(),
							'specialty': $('#specialty').val(),
							'name': $('#Sname').val(),
							'sex': $('#sex').val(),
							'degree': $('#degree').val()
						},
						page: {
							curr: 1
						}
					});
				});

				//点击添加按钮弹出页面
				$('#add').click(function() {
					addIndex = layer.open({
						type: 1,
						content: $('#addForm'),
						area: ['600px', '500px'],
						title: "您正在添加学生"
					});
				});

				//监听表单提交--添加
				form.on('submit(addS)', function(data) {
					//提交  ajax
					$.post(
						//地址
						'addStudent', //添加学生的方法
						$('#addForm').serialize(), //整个表单的数据以序列化的形式提交
						function(res) {
							if(res.success) {
								layer.msg('添加成功', {
									icon: 1
								}, function() {
									layer.close(addIndex); //关闭添加窗口
									window.location.reload(); //刷新页面
								});
							} else {
								layer.msg('添加失败，请刷新重试', {
									icon: 4
								}, function() {
									layer.close(addIndex); //关闭添加窗口
									window.location.reload(); //刷新页面
								});
							}
						}, 'json');
				});

				//监听工具条
				table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据    data.列名
					var layEvent = obj.event; //获得 lay-event 对应的值
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					if(layEvent === 'del') { //删除
						layer.confirm('真的删除该科室么', function(index) {
							obj.del();
							//删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
							$.post(
								//地址
								'delstudent', //删除
								{
									'id': data.id
								},

								function(res) {
									if(res.success) {
										layer.msg('删除成功', {
											icon: 1
										});
									} else {
										layer.msg('删除失败', {
											icon: 4
										});
									}
								}, 'json');

						});
					} else if(layEvent === 'edit') { //编辑
						//do something
						//弹出一个修改的页面
						//数据回显
						$('#upId').val(data.id);
						$('#upsid').val(data.sid);
						$('#upcard').val(data.card);
						$('#upname').val(data.name);
						$('#upsex').val(data.sex);
						//$('#updepartment').val(data.department);
						$('#upstatus').val(data.status);
						$("#updembs_id option").each(function() {
							if($(this).val() == data.mbs_id) {
								$(this).attr("selected", "selected");
							}
						});
						layer.open({
							type: 1,
							content: $('#upForm'),
							area: ['600px', '500px'],
							title: "正在修改"
						});

						//同步更新缓存对应的值
						obj.update({
							username: '123',
							title: '正在更新'
						});
					}
				});

				//监听表单提交--修改
				form.on('submit(upt)', function(data) {
					//提交  ajax
					$.post(
						//地址
						'upstudent', //修改的方法
						$('#upForm').serialize(), //整个表单的数据以序列化的形式提交
						function(res) {
							if(res.success) {
								layer.msg('修改成功', {
									icon: 1
								}, function() {
									layer.close(addIndex); //关闭修改窗口
									window.location.reload(); //刷新页面
								});
							} else {
								layer.msg('修改失败，请刷新重试', {
									icon: 4
								}, function() {
									layer.close(addIndex); //关闭修改窗口
									window.location.reload(); //刷新页面
								});
							}
						}, 'json');
				});

			});
		</script>

		<body>
			<!-- 模糊查询表单 -->
			<form class="layui-form" onsubmit="return false;">
				系院名：
				<div class="layui-input-inline" style="width: 70px">
					<select name="department" id="department" lay-verify="required">
						<c:forEach items="${all}" var="b">
							<option>${b.department}</option>
						</c:forEach>
					</select>
				</div>

				姓名：
				<div class="layui-input-inline">
					<input type="text" name="name" id="Sname" style="width: 130px" placeholder="请输入姓名" autocomplete="off" class="layui-input">
				</div>
				性别:
				<div class="layui-input-inline" style="width: 70px">
					<select name="sex" id="sex" lay-verify="required">
						<option>男</option>
						<option>女</option>
					</select>
				</div>

				<!-- 头部按钮 -->
				<button class="layui-btn" id="search" data-type="aaa">搜索</button>
				<button class="layui-btn" id="add" data-type="ccc">添加</button>
			</form>

			<!-- 表格 -->
			<table id="demo" lay-filter="test"></table>

			<!-- 行内工具栏 -->
			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
			</script>

			<!-- 添加页面开始 -->
			<form class="layui-form" onsubmit="return false;" id="addForm" style="display: none;">

				<div class="layui-form-item">
					<label class="layui-form-label">学号：</label> <input type="text" name="sid" style="width: 130px" lay-verify="required" placeholder="请输入学号" autocomplete="off" class="layui-input">
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">卡号：</label> <input type="text" name="card" style="width: 130px" placeholder="请输入卡号" autocomplete="off" class="layui-input">
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">姓名：</label> <input type="text" name="name" style="width: 130px" placeholder="请输入姓名" autocomplete="off" class="layui-input">
				</div>
				性别:
				<div class="layui-input-inline" style="width: 130px">
					<select name="sex" lay-verify="required">
						<option>男</option>
						<option>女</option>
					</select>
				</div>
				院系:
				<div class="layui-input-inline" style="width: 130px">
					<select name="mbs_id" lay-verify="required">
						<c:forEach items="${all}" var="b">
							<option>${b.mbs_id}</option>
						</c:forEach>
					</select>
				</div>
				<!-- <div class="layui-form-item">
        <label class="layui-form-label">院系：</label> <input type="text"
            name="mbs_id" style="width: 130px" placeholder="请输入院系"
            autocomplete="off" class="layui-input">
    </div> -->
				状态：
				<div class="layui-input-inline" style="width: 130px">
					<select name="status" lay-verify="required">
						<option>0</option>
						<option>1</option>
					</select>
				</div>
				<!-- <div class="layui-form-item">
        <label class="layui-form-label">状态：</label> <input type="text"
            name="status" style="width: 130px" placeholder="请输入0/1"
            autocomplete="off" class="layui-input">
    </div> -->
				<div class="layui-form-item">
					<label class="layui-form-label">备注：</label> <input type="text" name="remark" style="width: 130px" placeholder="请输入备注" autocomplete="off" class="layui-input">
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="addS">添加</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>

			</form>
			<!-- 添加页面结束 -->

			<!-- 修改页面开始 -->
			<form onsubmit="return false;" id="upForm" style="display: none;">

				<div class="layui-form-item" style="display: none;">
					<label class="layui-form-label">ID：</label> <input type="text" name="id" id="upId" style="width: 130px" lay-verify="required" class="layui-input">
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">学号：</label> <input type="text" name="sid" id="upsid" style="width: 130px" lay-verify="required" class="layui-input">
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">卡号：</label> <input type="text" name="card" id="upcard" style="width: 130px" class="layui-input">
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">姓名：</label> <input type="text" name="name" id="upname" style="width: 130px" class="layui-input">
				</div>
				性别:
				<div class="layui-form-item" style="width: 130px">
					<select name="sex" id="upsex" lay-verify="required">
						<option>男</option>
						<option>女</option>
					</select>
				</div>
				<!-- <div class="layui-form-item">
        <label class="layui-form-label">性别：</label> <input type="text"
            name="sex" id="upsex" style="width: 130px" class="layui-input">
    </div> -->
				所属院系:
				<div class="layui-form-item" style="width: 130px">
					<select name="mbs_id" id="updembs_id" lay-verify="required">
						<c:forEach items="${all}" var="b">
							<option value="${b.mbs_id}">${b.department}</option>
						</c:forEach>
					</select>
				</div>
				状态：
				<div class="layui-form-item" style="width: 130px">
					<select name="status" id="upstatus" lay-verify="required">
						<option>0</option>
						<option>1</option>
					</select>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="upt">修改</button>
					</div>
				</div>

			</form>
			<!-- 修改页面结束 -->

		</body>

</html>